<template>
  <div class="comment-table-container">
    <el-table
      :data="sortedTableData"
      style="width: 100%"
      fit
      :header-cell-style="{
        background: '#fff',
        color: '#232323',
        fontWeight: '600',
        textAlign: 'center', // 表头内容居中
        fontSize: '14px', // 表头字体大小
        height: '20px',
      }"
      :cell-style="{
        textAlign: 'center', // 单元格内容居中（可选，根据需求）
      }"
    >
      <el-table-column type="expand" :width="20">
        <template #default="props">
          <div
            class="comment-expand-content"
            style="padding: 10px 0 10px 110px"
          >
            <div
              class="comment-item"
              :style="'display: flex; align-items: flex-start; gap: 16px; margin-bottom: 12px;'"
              v-for="(comment, index) in props.row.comments"
              :key="index"
            >
              <div
                class="comment-header"
                :style="'min-width: 80px; white-space: nowrap; font-weight: 500;'"
              >
                Comment #{{ index + 1 }}
              </div>
              <div
                class="comment-text"
                :style="'flex: 1; word-wrap: break-word; line-height: 1.5; text-align: left;'"
              >
                {{ comment }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="No" :min-width="39">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
          <!-- 使用行索引+1作为序号 -->
        </template>
      </el-table-column>
      <el-table-column label="Name" :min-width="220">
        <template slot="header">
          <span style="text-align: left; display: block">Name</span>
          <!-- 自定义表头左对齐 -->
        </template>
        <template slot-scope="scope">
          <span style="text-align: left; display: block">{{
            scope.row.name
          }}</span>
          <!-- 单元格内容左对齐 -->
        </template>
      </el-table-column>
      <el-table-column label="Source" prop="source" :min-width="70">
        <template #default="scope">
          <!-- 根据 source 值显示对应的图片 -->
          <img
            v-if="scope.row.source"
            :src="scope.row.source"
            alt="平台图标"
            class="source-icon"
          />
          <!-- 若 source 为空，显示 checkbox -->
          <el-checkbox v-else v-model="scope.row.checked"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        label="Username"
        prop="username"
        :min-width="120"
      ></el-table-column>
      <el-table-column :min-width="50">
        <template slot="header">
          <img src="@/assets/likes.png" alt="喜欢" class="w-5 h-5" />
        </template>
        <template slot-scope="scope">
          {{ scope.row.likes }}
        </template>
      </el-table-column>

      <el-table-column :min-width="55">
        <template slot="header">
          <img src="@/assets/comments.png" alt="评论" class="w-5 h-5" />
        </template>
        <template slot-scope="scope">
          {{ scope.row.commentsCount }}
        </template>
      </el-table-column>
      <el-table-column :min-width="55">
        <template slot="header">
          <img src="@/assets/share.png" alt="分享" class="w-5 h-5" />
        </template>
        <template slot-scope="scope">
          {{ scope.row.shares }}
        </template>
      </el-table-column>
      <el-table-column :min-width="50">
        <template slot="header">
          <img src="@/assets/saves.png" alt="保存" class="w-5 h-5" />
        </template>
        <template slot-scope="scope">
          {{ scope.row.saves }}
        </template>
      </el-table-column>
      <el-table-column label="Sentiment" prop="sentiment" :min-width="88">
        <template slot-scope="scope">
          <span :class="getSentimentClass(scope.row.sentiment)">
            {{ scope.row.sentiment }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="Critical Level"
        prop="criticalLevel"
        :min-width="108"
      ></el-table-column>
      <el-table-column label="High Virality" :min-width="102">
        <template slot-scope="scope">
          <span
            v-if="
              isHighVirality(
                scope.row.likes,
                scope.row.commentsCount,
                scope.row.shares,
                scope.row.saves
              )
            "
          >
            <img src="@assets/Hyperlink/hot.png" alt="" />
            <!-- 高传播图标 -->
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        label="Date"
        prop="date"
        :min-width="105"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          no: 1,
          name: "Terrible stay at Hilton London",
          source: require("@/assets/Hyperlink/X1.png"),
          username: "Username",
          likes: 45,
          comments: [
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation",
          ],
          commentsCount: 2,
          shares: 4,
          saves: 43,
          sentiment: "1",
          criticalLevel: 4,
          checked: false,
          date: "31 May 2025",
        },
        {
          no: 2,
          name: "Travel Blog",
          source: require("@/assets/Hyperlink/Instagram.png"),
          username: "Username",
          likes: 88,
          comments: [],
          commentsCount: 88,
          shares: 88,
          saves: 88,
          sentiment: "8",
          criticalLevel: 3,
          checked: false,
          date: "31 May 2025",
        },
        {
          no: 3,
          name: "Destination Insider",
          source: require("@/assets/Hyperlink/LinkedIn.png"),
          username: "Username",
          likes: 20,
          comments: [],
          commentsCount: 88,
          shares: 88,
          saves: 88,
          sentiment: "2",
          criticalLevel: 3,
          checked: false,
          date: "31 May 2025",
        },
        {
          no: 4,
          name: "Terrible stay at Hilton London",
          source: require("@/assets/Hyperlink/google.png"),
          username: "Username",
          likes: 45,
          comments: [],
          commentsCount: 0,
          shares: 150,
          saves: 43,
          sentiment: "8",
          criticalLevel: 3,
          checked: false,
          date: "31 May 2025",
        },
        {
          no: 5,
          name: "Terrible stay at Hilton London",
          source: require("@/assets/Hyperlink/trip.png"),
          username: "Username",
          likes: 45,
          comments: [],
          commentsCount: 0,
          shares: 4,
          saves: 43,
          sentiment: "2",
          criticalLevel: 3,
          checked: false,
          date: "31 May 2025",
        },
        {
          no: 6,
          name: "Terrible stay at Hilton London",
          source: require("@/assets/Hyperlink/YouTube.png"),
          username: "Username",
          likes: 45,
          comments: [],
          commentsCount: 0,
          shares: 4,
          saves: 43,
          sentiment: "10",
          criticalLevel: 3,
          checked: false,
          date: "31 May 2025",
        },
        {
          no: 7,
          name: "Terrible stay at Hilton London",
          source: require("@/assets/Hyperlink/TikTok.png"),
          username: "Username",
          likes: 45,
          comments: [],
          commentsCount: 0,
          shares: 4,
          saves: 43,
          sentiment: "10",
          criticalLevel: 3,
          checked: false,
          date: "31 May 2025",
        },
        {
          no: 8,
          name: "Terrible stay at Hilton London",
          source: require("@/assets/Hyperlink/RedNote.png"),
          username: "Username",
          likes: 45,
          comments: [],
          commentsCount: 0,
          shares: 4,
          saves: 43,
          sentiment: "5",
          criticalLevel: 3,
          checked: false,
          date: "31 May 2025",
        },
        {
          no: 9,
          name: "Terrible stay at Hilton London",
          source: require("@/assets/Hyperlink/Threads.png"),
          username: "Username",
          likes: 45,
          comments: [],
          commentsCount: 0,
          shares: 4,
          saves: 43,
          sentiment: "9",
          criticalLevel: 3,
          checked: false,
          date: "31 May 2025",
        },
        {
          no: 10,
          name: "Terrible stay at Hilton London",
          source: require("@/assets/Hyperlink/Reddit.png"),
          username: "Username",
          likes: 45,
          comments: [],
          commentsCount: 0,
          shares: 4,
          saves: 43,
          sentiment: "3",
          criticalLevel: 3,
          checked: false,
          date: "31 May 2025",
        },
      ],
    };
  },
  computed: {
    // 修正：正确引用tableData进行排序
    sortedTableData() {
      return [...this.tableData].sort(
        (a, b) => Number(a.sentiment) - Number(b.sentiment)
      );
    },
  },
  methods: {
    // 根据 sentiment 值返回对应的颜色类名
    getSentimentClass(sentiment) {
      const value = Number(sentiment);
      if (value === 1) return "sentiment-level-1";
      if (value === 2) return "sentiment-level-2";
      if (value === 3) return "sentiment-level-3";
      if (value === 4) return "sentiment-level-4";
      if (value === 5) return "sentiment-level-5";
      if (value === 6) return "sentiment-level-6";
      if (value === 7) return "sentiment-level-7";
      if (value === 8) return "sentiment-level-8";
      if (value === 9) return "sentiment-level-9";
      if (value === 10) return "sentiment-level-10";
      return ""; // 处理无效值
    },
    // 计算互动总和并判断是否大于 150
    isHighVirality(likes, commentsCount, shares, saves) {
      const total = likes + commentsCount + shares + saves;
      return total > 150;
    },
  },
};
</script>

<style scoped lang="scss">
.comment-table-container {
  width: 100%;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #cdcccc;

  :deep(.el-table) {
    /* 情感颜色样式 */
    .sentiment-level-1 {
      color: #000000;
    }
    .sentiment-level-2 {
      color: #a4242c;
    }
    .sentiment-level-3 {
      color: #ce4049;
    }
    .sentiment-level-4 {
      color: #ed6971;
    }
    .sentiment-level-5 {
      color: #f68d2b;
    }
    .sentiment-level-6 {
      color: #efb82c;
    }
    .sentiment-level-7 {
      color: #8f8f8f;
    }
    .sentiment-level-8 {
      color: #454545;
    }
    .sentiment-level-9 {
      color: #2faa68;
    }
    .sentiment-level-10 {
      color: #238651;
    }
    font-size: 14px; /* 全局字体大小（内容） */
    color: #454545; /* 内容字体颜色 */
    font-weight: 400;
    /* 展开内容样式 */
    .el-table__expand-cell {
      // 移除默认样式
      padding: 0 !important;
      background: transparent !important;
      border: none !important;
      .comment-expand-content {
 
        padding-top: 10px; /* 顶部内边距 */
        padding-bottom: 10px; /* 底部内边距 */

        .comment-item {
          display: flex !important; /* 强制 Flex 布局 */
          gap: 16px; /* 标题与内容间距（替代 margin-right） */
          margin-bottom: 12px; /* 评论项间距 */
          .comment-header {
            min-width: 80px; /* 标题最小宽度 */
            white-space: nowrap; /* 标题不换行 */
            font-weight: 500;
          }

          .comment-text {
            flex: 1; /* 占据剩余空间 */
            word-wrap: break-word; /* 长文本换行 */
            line-height: 1.5; /* 行高 */
          }
        }
      }
    }
    .el-table__row {
      height: 33px;
      &:hover {
        background: #fff;
      }
    }

    .el-table__cell {
      // padding: 12px 16px; /* 增加左右内边距，避免内容贴边 */
      text-align: center; /* 全局内容居中，个别列可单独覆盖 */
    }
    /* 强制 Name 列左对齐（优先级高于全局） */
    .el-table-column[label="Name"] .el-table__cell {
      text-align: left !important; /* 添加 !important 提升优先级 */
    }

    .el-table__header th {
      /* 表头样式 */
      background: #fff;
      color: #232323; /* 表头字体颜色 */
      font-weight: 600;
      text-align: left; /* 表头居中 */
      // padding: 16px;
      font-size: 14px; /* 表头字体大小 */
    }

    /* Source 列图标大小 */
    .source-icon {
      width: 17px;
      height: 17px;
      margin: 0 auto; /* 图标在单元格内居中 */
    }
  }
  ::v-deep .el-table__expand-icon .el-icon {
    position: absolute;
    left: 0% !important; /* 调整左侧距离 */
    top: 50% !important;
    margin-right: 0 !important;
  }
}
</style>
